<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="box">
        用户名：<input type="text" v-model="nam"><br>
        密码：<input type="password" v-model="pass"><br>
        确认密码：<input type="password" v-model="okpass"><br>
        昵称：<input type="text" v-model="snam"><br>
        性别<input type="radio" value="男" name="sexer" v-model="sex">男<input type="radio" value="女" name="sexer"
            v-model="sex">女<br>
        所属城市：
        <select v-on:change="c1()" v-model="province">
            <option v-for="(item,index) in citydata" :key="index">{{item.name}}</option>
        </select>
        <select v-on:change="c2()" v-model="city">
            <option v-for="(item,index) in citydata[a].city" :key="index">{{item.name}}</option>
        </select>
        <select v-model="district">
            <option v-for="(item,index) in citydata[a].city[b].districtAndCounty" :key="index">{{item}}</option>
        </select><br>
        兴趣爱好：
        <input type="checkbox" value="爬山" v-model="arr">爬山
        <input type="checkbox" value="旅游" v-model="arr">旅游
        <input type="checkbox" value="看书" v-model="arr">看书
        <input type="checkbox" value="看星星" v-model="arr">看星星<br>
        <button @click="submit()">点击将数据提交到控制台</button>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                citydata: [
                    {
                        name: "河北省",
                        city: [{
                            name: "石家庄市",
                            districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
                        }, {
                            name: "张家口市",
                            districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
                        }, {
                            name: "承德市",
                            districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
                        }, {
                            name: "秦皇岛市",
                            districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
                        }]
                    },
                    {
                        name: "山西省",
                        city: [{
                            name: "太原市",
                            districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
                        }, {
                            name: "朔州市",
                            districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
                        }, {
                            name: "大同市",
                            districtAndCounty: ["大同城区", "大同矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
                        }, {
                            name: "阳泉市",
                            districtAndCounty: ["阳泉城区", "阳泉矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
                        }]
                    }
                ],
                sex: "",
                province: "河北省",
                city: "石家庄市",
                district: "长安区",
                arr: [],
                nam: "",
                pass: "",
                okpass: "",
                snam: "",
                a: 0,
                b: 0,
            },
            methods: {
                submit() {
                    console.log("用户名：" + this.nam);
                    console.log("性别：" + this.sex);
                    console.log("昵称：" + this.snam);
                    console.log("密码：" + this.pass);
                    console.log("确认密码：" + this.okpass);
                    console.log("爱好：" + this.arr);
                    console.log("省：" + this.province + "   市：" + this.city + "   县：" + this.district);
                },
                c1() {
                    for (let i = 0; i < this.citydata.length; i++) {
                        if (this.province == this.citydata[i].name) {
                            this.a = i
                            this.b = 0
                            this.city = this.citydata[i].city[0].name
                            this.district = this.citydata[i].city[0].districtAndCounty[0]
                        }
                    }
                },
                c2() {
                    for (let i = 0; i < this.citydata.length; i++) {
                        if (this.province == this.citydata[i].name) {
                            for (let n = 0; n < this.citydata[i].city.length; n++) {
                                if (this.city == this.citydata[i].city[n].name) {
                                    this.b = n
                                    this.district = this.citydata[i].city[n].districtAndCounty[0]
                                }
                            }

                        }
                    }
                },
            }
        })
    </script>
</body>

</html>